<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="demoApp">

    <div class='panel panel-primary'>
        <div class="panel-heading">
            <h3 class='panel-title'>添加品牌</h3>
        </div>
        <div class="panel-body form-inline">
            <!--一行css form-inline-->
            <label>
                id:<input type="text" class="form-control" v-model="id">
            </label>
            <label>
                <!--@keyup.enter针对回车键的抬起事件，也可以自定义按键-->
                <!--名字:<input type="text" class="form-control" v-model="name" @keyup.enter="add">-->
                名字:<input type="text" class="form-control" v-model="name" @keyup.ll="add">
            </label>
            <input type="button" value="添加" class="btn btn-primary" @click="add">
            关键字<input id="search" v-color="'blue'" v-focus type="text" v-model="keywords" class="form-control"
                      @mouseleave="search(keywords)">
        </div>
    </div>

    <div class=""></div>

    <table class="table table-bordered table-hover table-striped">
        <thead>
        <th>id</th>
        <th>名字</th>
        <th>创建时间</th>
        <th>操作</th>
        </thead>
        <tbody>
        <!--写死的数据-->
        <!--<tr v-for="item in list" :key="item.id">-->
        <!--动态数据根据方法返回 -->
        <tr v-for="item in search(keywords)" :key="item.id">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.createTime | dateFilter('yyyy-mm-dd')}}</td>
            <td>{{item.createTime | dateFilter('')}}</td>
            <td>
                <input type="button" value="删除" @click="del(item.id)" class="btn btn-primary">
            </td>
        </tr>
        </tbody>
    </table>


</div>

</body>
<script>

    //自定义按键
    Vue.config.keyCodes.ll=13
    //自定义全局指令  在调用的时候 得加 v-
    //参数1：指令名称；参数2：是一个对象，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作
    //bind一加载到内存就([样式]可以绑定属性什么的)，inserted插入dom([行为]显示的时候用)
    Vue.directive('focus', {
        bind(el) {//当指令绑定到元素的时候会执行这个函数，只会执行一次
            //每个函数，第一个参数都是el：el是原生的js对象
            // el.focus()
        },
        inserted(el) {//inserted执行完毕后，元素插入到dom中时，会执行(只会执行一次)
            el.focus()
        },
        updated() {//当Vnode更新的时候会执行，会触发多次
        }
    })

    Vue.directive('color', {
        bind(el,binding) {
            // el.style.color = 'red'
            el.style.color=binding.value
        }
    })

    //时间过滤器---第一个参数取值 为{{data|methodName}}  | 前面的数据
    Vue.filter('dateFilter', function (dateStr, parten = 'yyyy') {
        var date = new Date(dateStr)
        var year = date.getFullYear();
        var mounth = date.getMonth() + 1;
        var day = date.getDate()

        // return year + '年' + mounth + '月' + day + '日'
        //模板字符串
        if (parten && parten.toLowerCase() === 'yyyy-mm-dd') {
            return `${year}年${mounth}月${day}日`
        } else {
            var hh = date.getHours()
            var mm = date.getMinutes()
            var ss = date.getSeconds()
            return `${year}年${mounth}月${day}日 ${hh}:${mm}:${ss}`
        }

    })


    var app = new Vue({
        el: '#demoApp',
        data: {
            id: '',
            name: '',
            keywords: '',
            list: [
                {id: 1, name: '奔驰', createTime: new Date()},
                {id: 2, name: '宝马', createTime: new Date()}
            ]

        },
        methods: {
            add() {
                console.log('键盘码：',Vue.config.keyCodes.enter)
                obj = {id: this.id, name: this.name, createTime: new Date()}
                this.list.push(obj)
                this.id = this.name = ''
            }, del(id) {
                //遍历集合找到对应匀速删除
                // this.list.some((item, index) => {
                //     if (item.id == id) {
                //         this.list.splice(index, 1)//splice(索引,元素个数,要添加的元素)
                //         //在数组的some 方法中 如果return true 就会立即终止这个数组的后续循环
                //         return true
                //     }
                // })
                //    method2    查找索引-通过索引删除
                var index = this.list.findIndex(item => {
                    if (item.id == id) {
                        return true
                    }
                })
                this.list.splice(index, 1)
            },
            search(keywords) {
                //遍历原集合--进行元素删选，组成新结合，返回
                var newList = []

                //method 1
                // this.list.forEach(item => {
                //     if (item.name.indexOf(keywords) >= 0) {
                //         newList.push(item)
                //     }
                // })


                //    method2 filter
                this.list.filter(item => {
                    if (item.name.includes(keywords)) {
                        newList.push(item)
                    }
                })

                return newList

            }


        }
    })


    //进入页面，获取焦点 js远程写法
    // document.getElementById("search").focus()


</script>


</html>